<template>
  <div class="param-item-list">
    <el-table 
      :data="paramItems" 
      border 
      size="mini"
      class="param-table"
    >
      <el-table-column label="参数名称" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.paramName" size="mini" placeholder="请输入参数名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数编码" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.paramCode" size="mini" placeholder="请输入参数编码"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数类型" width="120">
        <template #default="scope">
          <el-select v-model="scope.row.paramType" size="mini" @change="handleParamTypeChange(scope.row)">
            <el-option label="基础参数" value="base"></el-option>
            <el-option label="计算参数" value="calculation"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="数据类型" width="120">
        <template #default="scope">
          <el-select v-model="scope.row.dataType" size="mini" @change="handleDataTypeChange(scope.row)">
            <el-option label="文本" value="text"></el-option>
            <el-option label="数字" value="number"></el-option>
            <el-option label="下拉选择" value="select"></el-option>
            <el-option label="多行文本" value="textarea"></el-option>
            <el-option label="附件上传" value="attachment"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- 修复：移除列上的v-if，改用插槽内条件渲染 -->
      <el-table-column label="单位" width="80">
        <template #default="scope">
          <!-- 仅数字/下拉/附件类型显示单位输入框 -->
          <el-input 
            v-if="['number', 'select', 'attachment'].includes(scope.row.dataType)"
            v-model="scope.row.unit" 
            size="mini" 
            placeholder="单位"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="必填" width="80">
        <template #default="scope">
          <el-checkbox v-model="scope.row.isRequired" size="mini"></el-checkbox>
        </template>
      </el-table-column>
      <!-- 修复：移除列上的v-if，改用插槽内条件渲染 -->
      <el-table-column label="精度" width="80">
        <template #default="scope">
          <!-- 仅数字类型显示精度输入框 -->
          <el-input 
            v-if="scope.row.dataType === 'number'"
            v-model="scope.row.precision" 
            type="number" 
            size="mini" 
            :min="0" 
            placeholder="0"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="默认值" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.defaultValue" size="mini" placeholder="默认值"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button 
            type="text" 
            size="mini"
            @click="handleEditParam(scope.row, scope.$index)"
          >
            编辑
          </el-button>
          <el-button 
            type="text" 
            size="mini"
            @click="handleDeleteParam(scope.$index)"
            style="color: #f56c6c;"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 计算参数额外配置弹窗 -->
    <el-dialog 
      title="配置计算参数" 
      :visible.sync="calcParamDialogVisible"
      width="60%"
    >
      <el-form :model="currentCalcParam" label-width="100px">
        <el-form-item label="计算规则">
          <el-input
            v-model="currentCalcParam.calculationExpr"
            type="textarea"
            :rows="5"
            placeholder="如：ROUND(a+b,1)，使用参数编码作为变量"
          ></el-input>
        </el-form-item>
        <el-form-item label="依赖参数">
          <el-select
            v-model="currentCalcParam.dependencies"
            multiple
            size="mini"
            placeholder="选择依赖的参数"
          >
            <el-option 
              v-for="param in baseParamOptions"
              :key="param.value"
              :label="param.label"
              :value="param.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="calcParamDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCalcParamConfig">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
  name: 'ParamItemList',
  props: {
    paramItems: {
      type: Array,
      default: () => []
    },
    groupIndex: {
      type: Number,
      required: true
    },
    childIndex: {
      type: Number,
      default: -1
    },
    isNested: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      calcParamDialogVisible: false,
      currentCalcParam: {},
      baseParamOptions: [] // 基础参数选项（用于依赖选择）
    };
  },
  watch: {
    paramItems: {
      deep: true,
      handler() {
        // 更新基础参数选项
        this.baseParamOptions = this.paramItems
          .filter(param => param.paramType === 'base')
          .map(param => ({ label: param.paramName, value: param.paramCode }));
      }
    }
  },
  methods: {
    // 参数类型变更
    handleParamTypeChange(param) {
      if (param.paramType === 'calculation') {
        // 计算参数默认数据类型为数字
        param.dataType = 'number';
        // 打开配置弹窗
        this.currentCalcParam = { ...param };
        this.calcParamDialogVisible = true;
      } else {
        // 基础参数清空计算相关配置
        param.calculationExpr = '';
        param.dependencies = [];
      }
      this.$emit('update-param', {
        groupIndex: this.groupIndex,
        childIndex: this.childIndex,
        isNested: this.isNested,
        paramIndex: this.paramItems.findIndex(item => item.paramId === param.paramId),
        param
      });
    },

    // 数据类型变更
    handleDataTypeChange(param) {
      this.$emit('update-param', {
        groupIndex: this.groupIndex,
        childIndex: this.childIndex,
        isNested: this.isNested,
        paramIndex: this.paramItems.findIndex(item => item.paramId === param.paramId),
        param
      });
    },

    // 编辑参数
    handleEditParam(param, paramIndex) {
      if (param.paramType === 'calculation') {
        this.currentCalcParam = { ...param };
        this.calcParamDialogVisible = true;
      } else {
        // 基础参数直接触发更新
        this.$emit('update-param', {
          groupIndex: this.groupIndex,
          childIndex: this.childIndex,
          isNested: this.isNested,
          paramIndex,
          param
        });
      }
    },

    // 删除参数
    handleDeleteParam(paramIndex) {
      this.$emit('delete-param', {
        groupIndex: this.groupIndex,
        childIndex: this.childIndex,
        isNested: this.isNested,
        paramIndex
      });
    },

    // 保存计算参数配置
    saveCalcParamConfig() {
      if (!this.currentCalcParam.calculationExpr.trim()) {
        Message.warning('请输入计算规则表达式');
        return;
      }
      const paramIndex = this.paramItems.findIndex(item => item.paramId === this.currentCalcParam.paramId);
      this.$emit('update-param', {
        groupIndex: this.groupIndex,
        childIndex: this.childIndex,
        isNested: this.isNested,
        paramIndex,
        param: this.currentCalcParam
      });
      this.calcParamDialogVisible = false;
      Message.success('计算参数配置成功');
    }
  }
};
</script>

<style scoped>
.param-item-list {
  margin-top: 10px;
}

.param-table {
  width: 100%;
}

.el-table .el-input, .el-table .el-select {
  width: 100%;
}

/* 解决空值时输入框占位问题 */
.el-table .el-input--mini .el-input__inner {
  height: 28px;
  line-height: 28px;
}
</style>